<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="../css/pc-ggys.css">
    <link rel="stylesheet" href="../css/details.css">
</head>

<body>
    <div class="b_top">
        <div class="top">
            <div class="lf">
                <ul>
                    <li><a href="../html/06home.html">首页</a></li>
                    <li><a href="https://consumer.huawei.com/cn/" target="_blank">华为官网</a></li>
                    <li><a href="https://club.huawei.com" target="_blank">花粉俱乐部</a></li>
                    <li><a href="https://www.vmall.com/priority">V码(优购码)</a></li>
                    <li><a href="https://company.vmall.com/#/huawei" target="_blank">企业购</a></li>
                    <li><a href="">Select Region</a></li>
                    <li class="topdh">更多精彩
                        <div class="topejdh">
                            <div><a href="https://www.harmonyos.com/cn/home/" target="_blank">HarmonyOS</a></div>
                            <div><a href="https://appgallery.huawei.com/" target="_blank">应用市场</a></div>
                            <div><a href="https://cloud.huawei.com" target="_blank">华为终端云空间</a></div>
                            <div><a href="https://developer.huawei.com/consumer/cn/" target="_blank">开发者联盟</a></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="ri">
                <ul>
                    <li>
                        <h1 class="loginIn">欢迎XX</h1>
                    </li>
                    <li><a class="loginOut">退出登录</a></li>
                    <li><a class="noLogin" href="../html/01login.html">请登录</a></li>
                    <li><a href="../html/02reg.html">注册</a></li>
                    <li><a href="">我的订单</a></li>
                    <li class="kfej">客服
                        <div class="kfejdh">
                            <div>
                                <a href="https://www.vmall.com/help/index.html" target="_blank">服务中心</a>
                            </div>
                            <div>
                                <a href="">联系客服</a>
                            </div>
                        </div>
                    </li>
                    <li><a href="">网站导航</a></li>
                    <li><a href="">手机版</a></li>
                    <li><a href="../html/05cart.html"><img class="gwctb" src="../img/gwc.png">购物车<span
                                class="nums">(0)</span></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="b_nav">
        <div class="nav">
            <div class="navtb"><img src="https://res.vmallres.com/portal/1.11.6.303/h5/images/logo_app.png" alt="">
            </div>
            <div class="navdh">
                <ul>
                    <li>华为专区</li>
                    <li>鸿蒙智联</li>
                    <li>莫塞尔</li>
                    <li>华为智选</li>
                    <li>HarmonyOS</li>
                    <li>特惠企采</li>
                    <li>教育购</li>
                </ul>
            </div>
            <div class="navssk">
                <input type="text" placeholder="请输入商品名称">
                <img src="../img/sstp.png" alt="">
            </div>
        </div>
    </div>
    <article>
        <div class="article com clear">
            <div class="article_left">
                <!-- 放大镜 -->
                <div class="fdj">
                    <!-- 放大镜左边 -->
                    <div class="fdj_left">
                        <div class="img">
                            <div class="cover"></div>
                            <img src="" alt="">
                        </div>
                        <!-- <ul class="img_list clear"> -->
                        <!-- <li>
                                <img src="https://res.yslbeautycn.com/resources/2022/8/19/15c411119dc645ad8ec59e21f708e870_1000X1000.jpg?version=20220818142558720"
                                    alt="">
                            </li>
                            -->
                        <!-- </ul> -->
                    </div>
                    <!-- 放大镜右边 -->
                    <div class="fdj_right">
                        <img src="" alt="">
                    </div>
                </div>
            </div>
            <div class="article_right">
                <!-- 商品详情 动态生成 -->
                <div class="goods_detail">
                    <!-- <h4 class="name_en">销量：${xl}</h4>
                    <h3 class="name_cn">商品名称：${name}</h3>
                    <p class="des">${des}</p>
                    <h5 class="price">商品价格：￥${price}</h5>   -->
                </div>

                <!-- 地址 -->
                <div class="location">
                    <span class="select_location">请选择配送地址：</span>
                    <select name="" id="province">
                        <option value="请选择">请选择</option>
                    </select>
                    <select name="" id="city">
                        <option value="请选择">请选择</option>
                    </select>
                    <select name="" id="area">
                        <option value="请选择">请选择</option>
                    </select>
                </div>
                <div class="addToCart clear">
                    <button class="addcart">加入购物车</button>
                    <a class="jxtx" href="../html/06home.html">再去挑选一些</a>
                    <a class="jsgwc" href="../html/05cart.html">去结算</a>
                </div>
            </div>
        </div>
    </article>


    <footer>
        <div class="fot_s">
            <div class="fot_sz">
                <ul class="s1">
                    <p class="title">
                        购物指南
                    </p>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-4359.html" rel="nofollow">免息分期</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-7923.html" rel="nofollow">以旧换新</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-13022.html" rel="nofollow">众测活动</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-9295.html" rel="nofollow">企业购</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-13020.html" rel="nofollow">O2O采购</a>
                    </li>
                </ul>
                <ul class="s1">
                    <p class="title">
                        售后服务
                    </p>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-16708.html" rel="nofollow">门店维修</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/warranty-policy/"
                            rel="nofollow">保修政策</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-16682.html" rel="nofollow">防伪查询</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-834.html" rel="nofollow">退换货政策</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-16698.html" rel="nofollow">手机寄修服务</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/help/faq-16706.html" rel="nofollow">维修备件价格查询</a>
                    </li>
                </ul>
                <ul class="s1">
                    <p class="title">
                        维修与技术支持
                    </p>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/service-center/index.htm"
                            rel="nofollow">服务店</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/reservation/index.htm"
                            rel="nofollow">预约维修</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/express-repair/index.htm"
                            rel="nofollow">手机寄修</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/sparepart-price/index.htm"
                            rel="nofollow">备件价格查询</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/door-to-door-service/"
                            rel="nofollow">上门服务</a>
                    </li>
                </ul>
                <ul class="s1">
                    <p class="title">
                        特色服务
                    </p>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/discriminate/"
                            rel="nofollow">防伪查询</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/member/buyServicesIndex" rel="nofollow">补购保障</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/recycler" rel="nofollow">以旧换新</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/product/10086344499475.html#10086230774569"
                            rel="nofollow">礼品包装</a>
                    </li>
                </ul>
                <ul class="s1">
                    <p class="title">
                        关于我们
                    </p>
                    <li>
                        <a target="_blank" href="https://www.huawei.com/cn/about-huawei/corporate-information"
                            rel="nofollow">公司介绍</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://consumer.huawei.com/cn/support/where-to-buy"
                            rel="nofollow">华为零售店</a>
                    </li>
                    <li>
                        <a target="_blank" href="https://www.vmall.com/huawei/bophome.html" rel="nofollow">商家中心</a>
                    </li>
                    <li>
                        <a href="javascript:;" class="js-feedback" title="意见反馈">意见反馈</a>
                    </li>
                </ul>
                <ul class="s1">
                    <p class="title">友情链接</p>
                    <li>
                        <a href="https://www.huawei.com/cn" target="_blank" rel="noopener">华为集团</a>
                    </li>
                    <li>
                        <a href="https://consumer.huawei.com/cn" target="_blank" rel="noopener">华为CBG官网</a>
                    </li>
                    <li>
                        <a href="https://club.huawei.com" target="_blank" rel="noopener">花粉俱乐部</a>
                    </li>
                    <li>
                        <a href="https://www.huaweicloud.com" target="_blank" rel="noopener">华为云</a>
                    </li>
                    <li>
                        <a href="https://appgallery.huawei.com/" target="_blank" rel="noopener">华为应用市场</a>
                    </li>
                    <li>
                        <a href="https://xinsheng.huawei.com/cn/index" target="_blank" rel="noopener">华为心声社区</a>
                    </li>
                </ul>
            </div>
            <div class="fot_xian"></div>
            <div class="fot_sy">
                <h4>950805</h4>
                <p>7 x 24 小时客服热线 (仅收市话费)</p>
                <div class="zxkf"><a href=""><img src="../img/kf.png" alt="">在线客服</a></div>
                <div class="zxkftp">
                    <h2>关注VMALL:</h2>
                    <a class="awx" href=""><img src="../img/wx.png" alt="">
                        <div class="wxewm"><img
                                src="https://res.vmallres.com/pimages//pages/cdnImages/66357398344619375366.jpg" alt="">
                        </div>
                    </a>
                    <a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAAs8rht0TsBhARnVJBDm-irbJ_rFdayHddfMoxtv40ZDw/?#mid=52586950033"
                        target="_blank"><img src="../img/totiao.png" alt=""></a>
                    <a href="https://weibo.com/shophuawei" target="_blank"><img src="../img/wb.png" alt=""></a>
                    <a href="https://author.baidu.com/home/1587993495688621" target="_blank"><img src="../img/bd.png"
                            alt=""></a>
                </div>
            </div>
        </div>
        <div class="fot_x">
            <p class="hwsc"><a href="https://www.vmall.com"><img
                        src="https://res.vmallres.com/pimages//pages/cdnImages/33223073294617032233.png"
                        title="华为商城"></a></p>
            <div class="fl">
                <ul class="ftul">
                    <li>
                        <a href="https://www.huawei.com/cn/">华为集团</a>
                    </li>
                    <li>
                        <a href="https://consumer.huawei.com/cn/">华为CBG官网</a>
                    </li>
                    <li>
                        <a href="https://club.huawei.com/">花粉俱乐部</a>
                    </li>
                    <li>
                        <a href="https://appgallery.huawei.com/">华为应用市场</a>
                    </li>
                    <li>
                        <a href="https://www.harmonyos.com/">HarmonyOS</a>
                    </li>
                    <li>
                        <a href="https://cloud.huawei.com">华为终端云空间</a>
                    </li>
                    <li>
                        <a href="https://developer.huawei.com/cn/">开发者联盟</a>
                    </li>
                    <li>
                        <a href="https://m.vmall.com/app/open?type=1">华为商城手机版</a>
                    </li>
                </ul><a
                    href="https://privacy.consumer.huawei.com/legal/vmall/privacy-statement.htm?code=CN&amp;branchid=0&amp;language=zh-cn&amp;contenttag=default"
                    rel="nofollow" target="_blank" title="隐私声明">隐私声明</a> <a
                    href="https://privacy.consumer.huawei.com/legal/vmall/terms.htm?code=CN&amp;branchid=0&amp;language=zh-cn&amp;contenttag=default"
                    rel="nofollow" target="_blank" title="服务协议">服务协议</a> <a href="https://msale.vmall.com/cookies.html"
                    rel="nofollow" target="_blank" title="COOKIES">COOKIES</a> Copyright © 2012-<span
                    id="j-copyrightyear">2022</span>
                华为终端有限公司 版权所有 <a href="https://www.vmall.com/notice-17426" target="_blank">| 经营资质 |</a><a
                    href="https://beian.miit.gov.cn/" target="_blank"> 粤ICP备19015064号</a><em>|</em><a
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44190002003939"
                    target="_blank">粤公网安备 44190002003939号</a><br><a target="_blank"
                    href="https://res.vmallres.com/pimages//pages/cdnImages/40227551365615572204.png">增值电信业务经营许可证：粤B2-20190762<em>|</em></a><a
                    target="_blank"
                    href="https://wxdxsba.miit.gov.cn/serviceAction.action">备案主体编号：44201919072182</a><em>|</em><a
                    target="_blank"
                    href="https://res.vmallres.com/pimages//pages/cdnImages/91133651365615633119.pdf">粤新出网备（2021）2号<em>|</em></a><a
                    target="_blank"
                    href="https://res.vmallres.com/pimages//pages/cdnImages/58220651365615602285.png">（粤）网械平台备字[2022]第00005号<br></a><a
                    target="_blank"
                    href="https://res.vmallres.com/pimages//pages/cdnImages/17308188080618180371.jpg">互联网药品信息服务资格证（粤）-非经营性-2020-0102</a>
                | <a target="_blank"
                    href="https://res.vmallres.com/pimages//pages/cdnImages/29005784435618750092.pdf">粤东食药监械经营备20203930</a>
                | <a target="_blank"
                    href="https://res.vmallres.com/pimages//pages/cdnImages/42579551365615597524.png">广东省网络食品交易第三方平台备案：GDWS10168</a>
            </div>
            <p class="dzzp"><a href="https://res3.vmallres.com/shopdc/pic/5a818c14-f886-41b6-ad48-56c94a430471.jpg"><img
                        src="https://res.vmallres.com/pimages/template/content/2016/20160226162415360.png" alt=""></a>
            </p>
        </div>
    </footer>


    <script src="../js/promise_ajax.js"></script>
    <script src="../js/api.js"></script>
    <script>

        //
        // 登录状态 欢迎谁？
        const oH1 = document.querySelector('.loginIn');
        const username = localStorage.getItem('LOGIN_USER');

        // 判断是否登录  localStorage   LOGIN_USER
        const oLoginIn = document.querySelector(".loginIn");
        const oNoLogin = document.querySelector(".noLogin");
        const oLoginOutBtn = document.querySelector('.loginOut');
        const oNums = document.querySelector('.nums');
        console.log(oNums.innerHTML);

        //如果有用户名说明登录了 欢迎出现 退出登录出现
        getCart()
        async function getCart() {

            if (username) {
                oH1.style.display = 'block';
                oH1.innerHTML = '欢迎' + username;
                oLoginOutBtn.style.display = 'block';
                //没有说明 未登录  登录注册出现 退出登录消失
                await showCart({
                    username
                }).then(data => {
                    console.log(data);
                    let spid = 0;
                    data.list.forEach(({ goods_id }) => {
                        spid++
                    })
                    oNums.innerHTML = '(' + spid + ')';
                })
            } else {
                oNoLogin.style.display = 'block';
                oLoginOutBtn.style.display = 'none';

            }
            // 退出登录   清除localStorage    跳转至登录页面

            oLoginOutBtn.onclick = function () {
                // 清除localStorage
                localStorage.removeItem('LOGIN_USER');
                // 跳转至登录页面
                location.href = './01login.html';
            }
        }


        //获取最大的盒子
        const oBoss = document.querySelector('.boss');
        const oBosszuo = document.querySelector('.bosszuo');
        const oBossyou = document.querySelector('.bossyou');

        //获取后面的？id
        const search = location.search;
        console.log(search);

        const oBox = document.querySelector('.img');
        const oGoods_detail = document.querySelector('.goods_detail');
        const oFdj = document.querySelector('.fdj');

        // 这里的id是由商品列表页的跳转实现的
        const id = search.replace('?id=', '');
        console.log(id);
        getData()
        async function getData() {
            await detail({
                id
            }).then(data => {
                console.log(data);
                const { name, price, img, des, xl } = data.data;

                oFdj.innerHTML = `
                    <div class="fdj_left">
                        <div class="img">
                            <div class="cover"></div>
                            <img src="${img}" alt="">
                        </div>
                   
                    </div>
                    <!-- 放大镜右边 -->
                    <div class="fdj_right">
                        <img src="${img}" alt="">
                    </div>
              `

                oGoods_detail.innerHTML = `
                    <h4 class="name_en">销量：${xl}</h4>
                    <h3 class="name_cn">商品名称：${name}</h3>
                    <p class="des">${des}</p>
                    <h5 class="price">商品价格：￥${price}</h5>  
            `

                const oImg = document.querySelector('.img');
                console.log(oImg);
                const oCover = document.querySelector('.cover');


                let r = oCover.offsetWidth / 2;
                let _left = oFdj.offsetLeft;
                let _top = oFdj.offsetTop;
                console.log(_left);
                console.log(_top);

                let border = getCss(oImg, 'borderWidth');
                var maxHeight = oImg.clientWidth - oCover.offsetWidth;
                var maxWidth = oImg.clientHeight - oCover.offsetHeight;


                var oBigImg = document.querySelector('.fdj_right img');
                var oRight = document.querySelector('.fdj_right');


                // 大图的移动比例
                // var scale = 大图的移动范围 / 小图的移动范围
                let maxBigWidth = oBigImg.offsetWidth - oRight.offsetWidth;

                let scale = maxBigWidth / maxWidth;

                // 鼠标移入移出
                oImg.onmouseover = function () {
                    // 显示这个cover
                    oCover.style.visibility = 'visible';
                    oBigImg.style.visibility = 'visible';
                }

                oImg.onmouseout = function () {
                    // 显示这个cover
                    oCover.style.visibility = 'hidden';
                    oBigImg.style.visibility = 'hidden';
                }

                // 鼠标跟随   鼠标移动事件
                // 事件绑定给谁？？？   如果是cover   就会跑丢了
                // 事件需要绑定给oBox oimg

                oImg.onmousemove = function (e) {
                    let ev = e || event;
                    let x = ev.pageX - r - _left - border;
                    let y = ev.pageY - r - _top - border;
                    // 判断
                    if (x < 0) x = 0;
                    if (y < 0) y = 0;
                    if (x > maxWidth) x = maxWidth;
                    if (y > maxHeight) y = maxHeight;
                    oCover.style.cssText += `left:${x}px;top:${y}px`;
                    // 大图反向移动
                    oBigImg.style.cssText += `left:${-x * scale}px;top:${-y * scale}px`;
                }
            })
        }

        //    必须判断是否登录


        const oBtn = document.querySelector('.addcart');
        oBtn.onclick = async function () {
            // 判断是否登录
            const username = localStorage.getItem('LOGIN_USER');
            console.log(username);
            if (username) {
                // 
                await addToCart({
                    username,
                    id,
                    num: 1
                }).then(data => {
                    console.log(data);
                    alert('加入购物车成功')
                })
                // getCart()
                // async function getCart() {
                    await showCart({
                        username
                    }).then(data => {
                        console.log(data);
                        let spid = 0;
                        data.list.forEach(({ goods_id }) => {
                            spid++
                        })
                        oNums.innerHTML = '(' + spid + ')';
                    })

                }
            // }

            else {

                alert('对不起，请先登录');
                // 跳转到登录 把当前页面的地址携带上
                location.href = './01login.html?WZA=' + location.href;
            }
        }

        //封装获取属性
        function getCss(obj, prop) {
            if (window.getComputedStyle) {
                return parseInt(getComputedStyle(obj)[prop]);
            }
            return parseInt(obj.currentStyle[prop])
        }


        //三级联动
        const oPro = document.querySelector('#province');
        const oCity = document.querySelector('#city');
        const oAera = document.querySelector('#area');


        //显示省
        getsjld()
        async function getsjld() {
            await sjld().then(data => {
                // console.log(d);
                let sheng = data.list;
                let shengHTML = '<option value="请选择">请选择</option>';
                sheng.forEach(({ name }) => {
                    shengHTML += `'<option value="${name}">${name}</option>'`
                })
                oPro.innerHTML = shengHTML;

                //选择省
                oPro.onchange = function () {
                    const shengVal = this.value;
                    if (shengVal === '请选择') {
                        oCity.innerHTML = '<option value="请选择">请选择</option>';
                        oAera.innerHTML = '<option value="请选择">请选择</option>';
                        return;
                    }
                    //找到省对应的市
                    oAera.innerHTML = '<option value="请选择">请选择</option>';
                    let shi = sheng.filter(v => v.name === shengVal);
                    console.log(shi);
                    shi = shi[0].list;
                    console.log(shi);
                    let shiHTML = '<option value="请选择">请选择</option>';
                    shi.forEach(({ name }) => {
                        shiHTML += `<option value="${name}">${name}</option>`
                    })
                    oCity.innerHTML = shiHTML;
                    //选择市
                    oCity.onchange = function () {
                        const shiVal = this.value;
                        if (shiVal === '请选择') {
                            oAera.innerHTML = '<option value="请选择">请选择</option>';
                            return;
                        }
                        // 找到满足条件的数据
                        let qu = shi.filter(v => v.name === shiVal);
                        console.log(qu);
                        qu = qu[0].list;
                        console.log(qu);
                        let quHTML = '<option value="请选择">请选择</option>';
                        if (qu === undefined) {
                            quHTML = '<option value="暂无">暂无</option>';
                            oAera.innerHTML = quHTML;
                        } else {
                            // let quHTML = '<option value="请选择">请选择</option>';
                            qu.forEach(({ name }) => {
                                quHTML += `<option value="${name}">${name}</option>`
                            })
                            oAera.innerHTML = quHTML;
                        }
                    }
                }
            })
        }










    </script>



</body>

</html>